/*
 * @Description: 类型选择
 * @Author: Zzt
 * @Date: 2023-01-07 18:54:36
 * @LastEditTime: 2023-01-09 10:43:32
 */

import { useEffect, useState } from 'react';
import { Menu, Select } from 'antd';
import classNames from 'classnames/bind';
import type { IArchiveType } from '@/interfaces/archiveType';
import type { IFond } from '@/interfaces/fond';

import styles from '../styles/index.module.scss';
import { receiveTypeList } from '@/dictionary/transfer';
import { IBaseDic } from '@/interfaces/global';

const cx = classNames.bind(styles);

const { Option } = Select;

//  模板类型
const selectList = [
  { id: 1, selectName: '导入' },
  { id: 2, selectName: '导出' }
];
export interface IUFAChangeCallback {
  fondId: number;
  fondItem: IFond;
  atId: number;
  atItem: IArchiveType;
}
const TemplateTypeNav = ({ onChange }: any) => {
  // 选中的全宗
  const [selectTypeId, setSelectTypeId] = useState(1);
  // 选中的档案类型id
  const [selectId, setSelectId] = useState(1);
  const [change, setChange] = useState(0);
  // 切换全宗自动加载档案类型
  useEffect(() => {
    setChange((state) => state + 1);
    setSelectId(1);
  }, [selectTypeId]);

  useEffect(() => {
    if (selectId) {
      if (selectTypeId % 2 === 1) {
        onChange({ methodType: selectId, tplType: (selectId - 1) * 2 });
      } else {
        onChange({ methodType: selectId, tplType: selectId * 2 - 1 });
      }
    }
  }, [selectId, change]);

  /**
   * @description: 切换导入导出
   * @param {number} val 选中的
   */
  const handleFondChange = (val: number) => {
    setSelectTypeId(val);
  };

  /**
   * @description: 切换档案类型
   * @param {any} param1
   */
  const onSelect = ({ key }: any) => {
    setSelectId(parseInt(key, 10));
  };

  return (
    <div className={cx('container')}>
      <Select value={selectTypeId} style={{ width: '100%' }} onChange={handleFondChange}>
        {selectList.map((fond) => (
          <Option key={fond.id} value={fond.id}>
            {fond.selectName}
          </Option>
        ))}
      </Select>
      <h6 className={cx('at-header')}>类型列表</h6>
      <div className={cx('at-list-wrap')}>
        <Menu
          items={receiveTypeList.map((item: IBaseDic) => ({ key: item.id, label: item.name }))}
          selectedKeys={[`${selectId}`]}
          onSelect={onSelect}
          style={{ width: 200 }}
        ></Menu>
      </div>
    </div>
  );
};
export default TemplateTypeNav;
